<div class="watchlist-mini-container">
    <ul class="tab-menu">
        <li (click)="isLatestActive=false" [class.active]="!isLatestActive">
            <img *ngIf="!isLatestActive" src="/static/images/chose_icon_record_pressed.png">
            <img *ngIf="isLatestActive" src="/static/images/chose_icon_record_default.png"> 历史记录
        </li>
        <li (click)="isLatestActive=true" [class.active]="isLatestActive">
            <img *ngIf="isLatestActive" src="/static/images/chose_icon_add_pressed.png">
            <img *ngIf="!isLatestActive" src="/static/images/chose_icon_add_default.png"> 自选组合
        </li>
    </ul>
    <!--新建分组(没有分组时显示)-->
    <div class="add-group" [class.active]="isLatestActive && !wlGroups?.length">
        <div class="watchlist-group-header" (click)="showGroupModal('add')">
            <i class="fa fa-plus i-left"></i>
            <span>新建自选股分组</span>
        </div>
    </div>
    <!--全部自选股分组-->
    <!--<div class="watchlist-all">
    <div class="watchlist-group-header">
      <span class="group-title" (click)="showFullGroupTable=!showFullGroupTable">全部自选股</span>
      <div class="dropdown">
        <a class="dropdown-toggle" href="javascript:;" (click)="configAllGroup()">
          <i class="fa fa-ellipsis-h dropdown-toggle" data-toggle="dropdown"></i>
        </a>
        <ul class="dropdown-menu" *ngIf="selectedGroup==='all'">
          <li data-toggle="modal" data-target="#addGroupModal" (click)="showGroupModal('add')">
            <i class="fa fa-plus i-left"></i>
            <span>新建分组</span>
          </li>
        </ul>
      </div>
    </div>
    <modal-groupname *ngIf="showAddGroupModal" [title]="groupModalTitle" (onConfirmed)="addGroup($event)" (onHide)="showAddGroupModal=false"></modal-groupname>
    <table class="watchlist-group-table" *ngIf="showFullGroupTable" cellpadding="1" cellspacing="0">
      <thead>
        <tr>
          <td class="table-cell" *ngFor="let head of headers" [ngClass]="getHeaderClass(head)" (click)="setOrder(head.key, '', wls.fullGroups.details)">{{head.label}}</td>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let row of wls.fullGroups.details">
          <td class="table-cell" *ngFor="let head of headers" [class.name-cell]="head.key === 'name'" [ngClass]="getSuitableClass(head, row['change_rate'])"
            (click)="checkoutStock(row.symbol)">{{head.withPercent? (row[head.key]?row[head.key]:"0") + "%" : head.withUnit ? (row[head.key] | optimizeUnit) :
            (row[head.key])}}
            <br *ngIf="head.key === 'name'"><span class="symbol-cell">{{head.key === 'name' ? (row.symbol | stripExtension) : ""}}</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>-->
    <!--具体的自选股分组-->
    <div class="watchlist-group" *ngFor="let group of wlGroups; let $gfirst = first; let $glast = last" [class.active]="isLatestActive">
        <div class="watchlist-group-header">
            <span class="group-title" (click)="group.isShow=!group.isShow">{{group.groupName}}</span>
            <div class="dropdown">
                <a class="dropdown-toggle" href="javascript:;" (click)="configGroup(group.groupId, $event)">
                    <img src="/static/images/chose_icon_more.png">
                </a>
                <ul class="dropdown-menu" [ngStyle]="{'top.px': menuTop}" *ngIf="selectedGroup===group.groupId && selectedStock==='empty'">
                    <li (click)="addStock()">
                        <i class="fa fa-plus i-left"></i>
                        <span>添加个股</span>
                    </li>
                    <li (click)="showGroupModal('add')">
                        <i class="fa fa-plus-square i-left"></i>
                        <span>添加分组</span>
                    </li>
                    <!-- <li (click)="showGroupModal('rename', group)">
                        <i class="fa fa-undo i-left"></i>
                        <span>重命名</span>
                    </li> -->
                    <li class="copy-item">
                        <i class="fa fa-copy i-left"></i>
                        <span>复制到</span>
                        <i class="fa fa-angle-right i-right"></i>
                        <ul class="copy-list">
                            <li *ngFor="let grouplist of wlGroups | exclude:group.groupId " (click)="copyGroup(grouplist, group.stocks)">{{grouplist.groupName}}</li>
                            <li class="empty-group" *ngIf="groupLength<2" (click)="resetSelectedItem()">暂无其他分组</li>
                        </ul>
                    </li>
                    <li (click)="removeGroup(group)">
                        <i class="fa fa-trash i-left"></i>
                        <span>删除</span>
                    </li>
                    <!-- <li (click)="shiftGroup(group, 'up')" *ngIf="!$gfirst">
                        <i class="fa fa-sort-up i-left"></i>
                        <span>上移</span>
                    </li>
                    <li (click)="shiftGroup(group, 'down')" *ngIf="!$glast">
                        <i class="fa fa-sort-down i-left"></i>
                        <span>下移</span>
                    </li> -->
                </ul>
            </div>
        </div>
        <modal-groupname *ngIf="showRenameGroupModal" [title]="groupModalTitle" (onConfirmed)="renameGroup($event)" (onHide)="showRenameGroupModal=false"></modal-groupname>
        <table class="watchlist-group-table" *ngIf="group.isShow" cellpadding="1" cellspacing="0">
            <!--<thead>
        <tr>
          <td class="table-cell" *ngFor="let head of headers" [ngClass]="getHeaderClass(head)" (click)="setOrder(head.key, group.id, group.details)">{{head.label}}</td>
        </tr>
      </thead>-->
            <tbody>
                <tr *ngFor="let row of group.stocks; trackBy: trackBySymbol; let $first = first" [class.selected]="row.symbol === selectStock">
                    <td class="table-cell" *ngFor="let head of headers; let $lastCell = last" [class.name-cell]="head.key === 'name'" [ngClass]="getSuitableClass(head, row['change_rate'])" [class.text-go-zero]="row[head.key]==='--'" (click)="checkoutStock(row.symbol)">
                        <span>{{(row[head.key]==='--') ? '--' : head.key==='current' ? (row[head.key] | number:'1.2') :(head.withPercent? (row[head.key]?row[head.key]:"0") + "%" : head.withUnit ? (row[head.key] | optimizeUnit) : (row[head.key]))}}</span>
                        <br *ngIf="head.key === 'name'"><span class="symbol-cell">{{head.key === 'name' ? (row.symbol | stripExtension) : ""}}</span>
                        <div class="dropdown" *ngIf="$lastCell">
                            <a class="dropdown-toggle" href="javascript:;" (click)="configStock(group.groupId, row.symbol, $event)">
                                <img src="/static/images/chose_icon_set.png">
                            </a>
                            <ul class="dropdown-menu" [ngStyle]="{'top.px': menuTop}" *ngIf="selectedGroup===group.groupId && selectedStock===row.symbol">
                                <!-- <li (click)="setTopStock(group, row.symbol)" *ngIf="!$first">
                                    <i class="fa fa-send i-left"></i>
                                    <span>置顶</span>
                                </li> -->
                                <li class="copy-item">
                                    <i class="fa fa-copy i-left"></i>
                                    <span>复制到</span>
                                    <i class="fa fa-angle-right i-right"></i>
                                    <ul class="copy-list">
                                        <li *ngFor="let grouplist of wlGroups | exclude:group.groupId" (click)="copyStock(grouplist, row.symbol)">{{grouplist.groupName}}</li>
                                        <li class="empty-group" *ngIf="groupLength<2" (click)="resetSelectedItem()">暂无其他分组</li>
                                    </ul>
                                </li>
                                <li (click)="removeStock(group, row.symbol)">
                                    <i class="fa fa-trash i-left"></i>
                                    <span>删除</span>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <!--最近浏览的自选股-->
    <div class="latest-group" [class.active]="!isLatestActive">
        <table class="watchlist-group-table" cellpadding="1" cellspacing="0">
            <tbody>
                <tr *ngFor="let row of historyGroup; trackBy: trackBySymbol" [class.selected]="row.symbol === selectStock">
                    <td class="table-cell" *ngFor="let head of historyHeaders" [class.name-cell]="head.key === 'name'" [ngClass]="getSuitableClass(head, row['change_rate'])" [class.text-go-zero]="row[head.key]==='--'" (click)="checkoutStock(row.symbol)">{{(row[head.key]==='--') ? '--' : head.key==='current' ? (row[head.key] | number:'1.2') :(head.withPercent? (row[head.key]?row[head.key]:"0") + "%" : head.withUnit ? (row[head.key] | optimizeUnit) : (row[head.key]))}}
                        <br *ngIf="head.key === 'name'"><span class="symbol-cell">{{head.key === 'name' ? (row.symbol | stripExtension) : ""}}</span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <!--弹出下拉列表时显示的空白区域，点击此区域关闭下拉菜单-->
    <div class="modal-backdrop fade" *ngIf="selectedGroup" [ngClass]="{'in': selectedGroup}" (click)="selectedGroup='';selectedStock=''"></div>
    <modal-groupname *ngIf="showAddGroupModal" [title]="groupModalTitle" (onConfirmed)="addGroup($event)" (onHide)="showAddGroupModal=false"></modal-groupname>
    <cm-modal-instance *ngIf="isShowModalTips" [heading]="modalHeading" [tips]="modalTips" [params]="modalParams"></cm-modal-instance>
</div>